
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }
        div {
            display: block;
        } 
        .xh1 .xh img {
            width: 100%;
            height: 100%;
           display: block;
           max-width: 100%;
           position: fixed;
            left: 50%;
            bottom: 50px;
            width: 375px;
            margin-left: -187.5px;
            height: 45px;
            z-index: 1;
        }

        .qq {
            width: 100%;
            height: 99.9px;
            background-color: rgba(255, 196, 0, 0.925);
            margin-top: -5px;
            display: flex;

        }

        .qq .qq1 img {
            width: 19.86px;
            height: 33.11px;
            color: white;
            position: absolute;
            left: 5%;
            margin-top: 15px;
        }

        .qq .qq2 img {
            width: 215.28px;
            height: 41.95px;
            position: absolute;
            right: 20%;
            margin-top: 5px;
        }

        .qq .qq3 img {
            width: 19.86px;
            height: 33.14px;
            position: absolute;
            right: 5%;
            margin-top: 15px;
        }

        .sousuo {
            width: 90%;
            height: 30px;
            background-color: #fff;
            margin: 0 auto;
            border-radius: 15px;
            display: flex;
            margin-top: 60px;
        }

        .fangdajing {
            width: 18px;
            height: 15px;
            background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=) no-repeat;
            background-position: -80px 0;
            background-size: 200px;
            margin: 8px 0 0 15px;
           
        }

       
        body {
            position: relative;
            height: 100%;
            width: 100%;
        }

        body {
            background: white;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;

        }

        .swiper-container {
            width: 90%;
            height: 100%;
            margin: 0 auto;
            border-radius: 25px;

        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            box-shadow: 0 2px 6px rgba(94, 43, 236, 0.925);
        }

        .xh12 {
         background-color: rgba(255, 196, 0, 0.925);;
            border-radius: 0 0 100px 100px;
           
          
        }

        .xh12 img {
            width: 100%;
            color: white;
        }

        .nav {
            width: 100%;
            height: 162px;
            text-align: center;
            background-color: white;

        }

        a {
            text-decoration: none;
        }

        .nav li {
            width: 20%;
            height: 74px;
            float: left;
        }

        .nav li img {
            width: 40px;
        }

        .nav li span {
            display: block;
        }

        .nav a {
            color: rgb(22, 22, 22);
            font-size: 12px;
        }

        .xh2 {
            margin: 10px;
        }

        .xiaohong {
            width: 100%;
            height: 129.16px;
            display: flex;
            padding-left: 2px;            
            


        }

        .xiaohong .xh1 img {
            display: block;
            width: 100%;
            height: 117px;

        }

        .xiaohong .xh2 img {
            width: 100%;
            /* display: left; */
            margin-left: -9px;
            /* padding-left: 1px; */
            height: 117px;
            
        }

        .xiaohong .xh3 img {
            display: block;
            width: 100%;
            padding-left: 2px;
            height: 117px;
        }

        .ab {
            width: 100px;
            width: 100px;
            position: fixed;
            z-index: 20px;
            right: -55px;
            top: 370px;

        }

        .ab img {
            width: 50px;
            height: 50px;
            position: absolute;
            right: 60%;
            margin-top: -50px;
        }

        .ab1 {
            width: 150px;
            width: 150px;
            position: fixed;
            z-index: 20px;
            right: -95px;
            top: 420px;

        }

        .ab1 img {
            width: 50px;
            height: 70.2px;
        }

        .xhya {
            width: 100%;
            height: 50px;
            /* background-color: #fff;
            display: flex;
            position: fixed;
            bottom: 0; */
            box-sizing: content-box;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto;
            z-index: 199;
            border-top: 1px solid #EEE;
            background: #FFF;
            transition: all .2s linear;
        }
        .xhya a {
            float: left;
            flex: 20%;
            text-align: center;
            position: relative;
            display: block;
            background: #fff;
            width: 75px;
            height: 50px;
        }

        .xhya a img {
            width: 24px;
        }
        .xhya .one {
            color: #000;
            font-weight: bold;
            display: block;
        }
        .xhya span{
            display: block;
            font-size: ;
            line-height: ;
            color: #666;
            text-align: center;
        }
    </style>
</head>

<body>
    <ul class="xh1">
        <a href="!">
            <li class="xh"><img src="image/2.png"></li>
        </a>
    </ul>
    <ul class="qq">
        <li class="qq1"><a href="#"><img src="image/1.png"></a></li>
        <li class="qq2"><a href="#"><img src="image/3.gif"></a></li>
        <li class="qq3"><a href="#"><img src="image/4.png"></a></li>
        <div class="sousuo">
            <div class="fangdajing"></div>

        </div>
    </ul>
    <!-- Swiper -->
    <div class="xh12">
        <div class="swiper-container lun">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="image/a1.jpg"></div>
                <div class="swiper-slide"><img src="image/a2.png"></div>
                <div class="swiper-slide"><img src="image/a3.jpg"></div>
                <div class="swiper-slide"><img src="image/a4.jpg"></div>
                <div class="swiper-slide"><img src="image/a5.png"></div>
                <div class="swiper-slide"><img src="image/a6.png"></div>
                <div class="swiper-slide"><img src="image/a7.jpg"></div>
                <div class="swiper-slide"><img src="image/a8.png"></div>

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="xh2">
        <div class="swiper-container1">
            <div class="swiper-wrapper1">
                <div class="swiper-slide1">
                    <ul class="nav">
                        <li>
                            <a href="javascript:;"><img src="image/11.png"><span>苏宁秒杀</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="image/12.png"><span>苏宁超市</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="image/13.png"><span>苏宁拼购</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="image/14.png"><span>手机数码</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="image/15.png"><span>苏宁家电</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="image/16.png"><span>免费水果</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="image/17.png"><span>super会员</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="image/18.png"><span>签到有礼</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="image/19.png"><span>领券中心</span></a>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="image/20.png"><span>更多频道</span></a>
                        </li>
                    </ul>
                </div>

                <ul class="xiaohong">
                    <li><span class="xh1"><a href="#"><img src="image/1.1.png"></span></a></li>
                    <li><span class="xh2"><a href="#"><img src="image/1.2.gif"></span></a></li>
                    <li><span class="xh3"><a href="#"><img src="image/1.3.gif"></span></a></li>
                </ul>
                <div class="ab">
                    <a href=""><img src="image/2.1.gif"></a>
                </div>
                <div class="ab1">
                    <a href=""><img src="image/2.2.gif"></a>
                </div>
                <div class="xhya">
                    <a href="javascript:;"><img src="image/3.1.png"><span class="one">猜你喜欢</span></a>
                    <a href="javascript:;"><img src="image/3.2.png"><span>分类</span></a>
                    <a href="javascript:;"><img src="image/3.3.png"><span>排行榜</span></a>
                    <a href="javascript:;"><img src="image/3.4.png"><span>购物车</span></a>
                    <a href="javascript:;"><img src="image/3.5.png"><span>我的易购</span></a>
                    </div><!-- Swiper JS -->
                    <script src="js/swiper.min.js"></script>

                    <!-- Initialize Swiper -->
                    <script>
                        var swiper = new Swiper('.swiper-container', {
                            pagination: {
                                el: '.swiper-pagination',
                                dynamicBullets: true,
                            },
                        });
                        var swiper1 = new Swiper(".lun", {
                            pagination: {
                                el: ".swiper-pagination",
                            },
                            autoplay: true,
                            loop: true,
                        });
                    </script>
</body>
</html>
